<template>
	<view class="loginContent" @tap="clickOutside($event)">
		<view v-if="!iswxLogin" class="phonrSign">
			<text class="loginsign">欢迎登录阅阳旅居</text>
			<view class="loginInput-row border e-phoneNum">
				<text class="title">输入手机号</text>
				<div class="enter-phone_num">
					<text>+86</text>
					<input  
						class="e-input" 
						maxlength="11" 
						type="number"
						@input="onphoneInput" 
					/>
				</div>
			</view>
			<view class="loginInput-row e-verifiNum">
				<text class="title">验证码</text>
				<view class="verifCode clearfix" >
					<view class="code-area" @tap.stop='clickInside($event)'>
						<view class="flex-box">
							<input
								v-show="onceInput"
								:value="val"
								type="number"
								:focus="isfocus"
								maxlength="4"
								class="hide-input"
								@input="getVal"
							/>
							<view v-bind:class="['item', { active: codeIndex == 1 }]">
								<view class="line"></view>
								<block>	{{ codeArr[0] ? codeArr[0] : ''}}</block>
							</view>
							<view v-bind:class="['item', { active: codeIndex == 2 }]">
								<view class="line"></view>
								<block >{{ codeArr[1] ? codeArr[1] : ''}}</block>
							</view>
							<view v-bind:class="['item', { active: codeIndex == 3 }]">
								<view class="line"></view>
								<block >{{ codeArr[2] ? codeArr[2] : ''}}</block>
							</view>
							<view v-bind:class="['item', { active: codeIndex == 4 }]">
								<view class="line"></view>
								<block >{{ codeArr[3] ? codeArr[3] : ''}}</block>
							</view>
						</view>
					</view>
					<button 
					class="priButton" 
					@tap.stop="sendVerifi($event)"
					:class="{'btn_gray':verGrayBtn}">
						{{codeTips}}
					</button>
				</view>
			</view>
			<button type="primary" class="priButton loginBtn" @tap="captchaLogin">立即登录</button>
		</view>
		<view v-if="iswxLogin">
			<view>
				<img class="login_bg" src="https://cdn.yueyangshuyuan.com/头图@2x.png"/>
			</view>
			<view>
				<img class="login_logo" src="https://cdn.yueyangshuyuan.com/%E5%B0%8F%E7%A8%8B%E5%BA%8F.png"/>
			</view>
			<view class="login_tel">
				<button type="primary" class="login_btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">微信手机号快捷登录</button>
				<button type="primary" class="login_othertel" @tap="iswxLogin=false">其他手机号登录</button>
			</view>
		</view>
	</view>
</template>

<script>
	import service from '../../service.js';
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import mInput from '../../components/m-input.vue'

	export default {
		components: {
			mInput
		},
		data() {
			return {
				iswxLogin:true,
				codeTips:"发送验证码",
				verGrayBtn:true,
				onceInput:false,
				codeIndex:-1,
				codeArr: [],
				val:'',//输入框的值
				isfocus:false,
				captchaCode:null,
				jscode:'',

				providerList: [],
				hasProvider: false,
				phoneNum: '',
				verCode: '',
				positionTop: 0,
				isDevtools: false,
				userInfo:'',
				countTime:false
			}
		},
		computed: mapState(['headImgUrl','userName']),
		mounted() {},		
		methods: {
			...mapMutations(['loginStateInfo']),
			initCode(){
				uni.login({
					success: res => {
						this.jscode = res.code;
					}
				});
			},
			getPhoneNumber(e){
				let _this = this;
				if(e.detail.errMsg == "getPhoneNumber:ok"){
					wx.checkSession({
						success(res){
							uni.showLoading({  
								title: '登陆中'  
							});
							_this.$api.wxPhoneLogin({...e.detail,code:_this.jscode}).then(json=>{
								uni.hideLoading(); 
								if(json.code !== -1){
									setTimeout(()=>{
										uni.showToast({
											icon: 'none',
											title: '登录成功'
										});
										_this.getUserDetail();
									},10)
									
									uni.setStorageSync('token', json.token);
									setTimeout(()=>{
										uni.navigateBack();
									},500)
								}else{
									_this.initCode();
								}
							})
						},
						fail(err){
							_this.initCode();
						}
					})
				}else{
					uni.showToast({
						icon: 'none',
						title: '微信授权登录失败，请使用短信验证码登录'
					});
				}
			},
			getCaptcha(){//获取验证码
				this.$api.captcha({
					phone:this.phoneNum
				}).then(json=>{
					
				});
			},
			captchaLogin(){//手机号登录
				uni.showLoading({  
                    title: '登陆中'  
                });
				this.$api.phoneLogin({
					code:this.jscode,
					phone:this.phoneNum,
					captcha:this.val,
				}).then(json=>{
					uni.hideLoading(); 
					setTimeout(()=>{
						uni.showToast({
							icon: 'none',
							title: '登录成功'
						});
						this.getUserDetail();
					},10)
					uni.setStorageSync('token', json.token);
					setTimeout(()=>{
						uni.navigateBack();
					},500)
				});
			},
			getUserDetail(){
				this.$api.getUser({}).then(json=>{
					if(json.code !== -1){
						this.loginStateInfo(json.data);
					}
				});
			},
			loginPhone(){
				uni.navigateTo({
					url: '/pages/login/login'
				});
			},
			onphoneInput(e){
				let reg = /^1[3-9][0-9]{9}$/;
				this.phoneNum = e.detail.value.trim();
				if(e.detail.value.trim().length == 11 && reg.test(e.detail.value.trim()) && !this.countTime){//可点击
					this.verGrayBtn = false;
				}else{
					this.verGrayBtn = true;
				}
			},
			sendVerifi(e){//60秒倒计时
				if(this.verGrayBtn){
					this.isfocus = false;
					this.codeIndex = -1;
					
				}else{
					let countTime = 60;
					this.countTime = true;
					this.verGrayBtn = true;
					this.codeTips == '重新发送' && (this.clearCode());
					this.codeIndex = 1;
					this.onceInput = true;
					setTimeout(()=>{
						this.isfocus = true;
					},0)
					this.codeTips = `${countTime}S重新获取`;
					this.getCaptcha();
					let clockIntval = setInterval(()=>{
						--countTime;
						this.codeTips = `${countTime}S重新获取`;
						if(countTime <= 0){
							clearInterval(clockIntval);
							this.codeTips = '重新发送';
							this.verGrayBtn = false;
							this.countTime = false;
						}
					},1000);
				}
			},
			getVal(e) {//获取输入验证码
				let { value } = e.detail;
				this.val = value;
				let arr = value.split('');
				this.codeIndex = arr.length + 1;
				this.codeArr = arr;12
				if (this.codeIndex > 4) {
					//输入完成
					this.codeArr.join('');
					this.isfocus = true;
				}
			},
			clearCode(){//清除验证码
				this.isfocus = false;
				this.codeIndex = 1;
				this.codeArr = [];
				this.val = "";
			},
			clickOutside(e){
				this.isfocus = false;
				this.codeIndex = -1;
			},
			clickInside(e){
				if(!this.onceInput){
					return;
				}
				this.isfocus = true;
				switch(this.val.length){
					case 0:
						this.codeIndex = 1;
					break;
					case 1:
						this.codeIndex = 2;
					break;
					case 2:
						this.codeIndex = 3;
					break;
					case 3:
						this.codeIndex = 4;
					break;
					case 4:
						// this.codeIndex = 4;
					break;
				}
			},
			initProvider() {
				const filters = ['weixin', 'qq', 'sinaweibo'];
				uni.getProvider({
					service: 'oauth',
					success: (res) => {
						if (res.provider && res.provider.length) {
							for (let i = 0; i < res.provider.length; i++) {
								if (~filters.indexOf(res.provider[i])) {
									this.providerList.push({
										value: res.provider[i],
										image: 'https://cdn.yueyangshuyuan.com/' + res.provider[i] + '.png'
									});
								}
							}
							this.hasProvider = true;
						}
					},
					fail: (err) => {
						console.error('获取服务供应商失败：' + JSON.stringify(err));
					}
				});
			},
			initPosition() {
				/**
				 * 使用 absolute 定位，并且设置 bottom 值进行定位。软键盘弹出时，底部会因为窗口变化而被顶上来。
				 * 反向使用 top 进行定位，可以避免此问题。
				 */
				this.positionTop = uni.getSystemInfoSync().windowHeight - 100;
			},
		},
		onReady() {
			this.initPosition();
			this.initProvider();
			// #ifdef MP-WEIXIN
			this.isDevtools = uni.getSystemInfoSync().platform === 'devtools';
			// #endif
		},
		onLoad(){
			// this.initCode();
			uni.login({
				success: res => {
					this.jscode = res.code;
				}
			});
		}
	}
</script>

<style  lang="scss">
	.fl {
		float: left;
		display: inline;
	}
	.fr {
		float: right;
		display: inline;
	}
	.clearfix:after {
		clear: both;
		content: ".";
		display: block;
		font-size: 0;
		height: 0;
		line-height: 0;
		visibility: hidden;
	}
	.clearfix {
		clear: both;
		zoom: 1;
	}
	button{
		&::after{
			border: none;
		}
	}
	.loginContent{
		width: 100%;
		background: #fff;
		.login_bg,.login_logo{
			margin: 0 auto;
			display: block;
		}
		.login_bg{
			width: 530rpx;
			height: 302rpx;
			margin-top: 92rpx;
		}
		.login_logo{
			width: 375rpx;
			height: 108rpx;
			margin-top: 38rpx;
		}
		.border{
			border-bottom:1px solid  #D3D3D3;
		}
		.priButton{
			width: 520rpx;
			height: 90rpx;
			font-size: 32rpx;
			border-radius: 105rpx;
			box-shadow: 0 4px 14px 0 rgba(226,84,34,0.20);
			background: #E25422;
			color: #FFFFFF;
		}
		.login_tel{
			margin-top: 332rpx;
			button{
				width: 520rpx;
				height: 90rpx;
				line-height: 90rpx;
				font-size: 32rpx;
				border-radius: 105rpx;
				
			}
			.login_btn{
				box-shadow: 0 4px 14px 0 rgba(226,84,34,0.20);
				background: #E25422;
				color: #FFFFFF;
				margin-bottom:40rpx;
			}
			.login_othertel{
				border: 1px solid #E25422;
				color: #E25422;
				background: #fff;
			}
		}
		.phonrSign{
			padding: 48rpx 48rpx 0;
			.loginsign{
				font-size: 48rpx;
				color: #000000;
				font-weight: bold;
				margin-bottom: 52rpx;
				display: block;
			}
			.loginInput-row{
				.title{
					font-size: 28rpx;
					color: #999999;
					display: block;
					margin-bottom: 22rpx;
				}
				.enter-phone_num{
					font-size: 36rpx;
					color: #1A1D1E;
					display: flex;
					text{
						padding-right: 40rpx;
						// padding-bottom:20rpx;
						line-height: 68rpx;
					}
					.e-input{
						width: calc(100% - 100rpx);
						font-size: 36rpx;
						color: #1A1D1E;
						line-height: 48rpx;
						height: 68rpx;
					}
				}
				input{
					caret-color:#E25422;
				}
			}
			.e-phoneNum{
				margin-bottom: 40rpx;
			}
			.e-verifiNum{
				.verifCode{
					display: flex;
				}
				.priButton{
					width: 232rpx;
					height: 72rpx;
					line-height: 72rpx;
					border-radius: 12rpx;
					margin-left: 34rpx;
					box-sizing: border-box;
					padding: 0;
				}
			}
			.loginBtn{
				margin-top: 72rpx;
				line-height: 90rpx;
			}
			.btn_gray{
				background: #C6C6C6;
				box-shadow: none;
			}
		}
	}
	.action-row {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.action-row navigator {
		color: #007aff;
		padding: 0 10px;
	}
	.code-area {
		text-align: center;
		.flex-box {
			display: flex;
			flex-wrap: wrap;
			position: relative;
			justify-content: center;
		}
		.item {
			position: relative;
			width:72upx;
			height: 72upx;
			margin-right: 26upx;
			font-size: 36upx;
			color: #1A1D1E;
			line-height: 72upx;
			box-sizing: border-box;
			border-bottom:1px solid  #D3D3D3;
		}
		.item:last-child {
			margin-right: 0;
		}
		.active {
			border-color:#D3D3D3;
		}
		.active .line {
			display: block;
		}
		.line {
			display: none;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width:2upx;
			height: 40upx;
			background: #E25422;
			animation: twinkling 1s infinite ease;
		}
		.hide-input {
			position: absolute;
			top: 0;
			left: -100%;
			width: 200%;
			height: 100%;
			text-align: left;
			z-index: 9;
			opacity: 1;
		}
		@keyframes twinkling {
			0% {
				opacity: 0.7;
			}
			50% {
				opacity: 1;
			}
			100% {
				opacity: 0.7;
			}
		}
		.content {
			height: 400upx;
		}
		button{
			margin-top: 30upx;
		}
	}
</style>
